<template>
  <div class="toolBar">
    <div class="searchBox">
      <el-input
        class="searchInput"
        prefix-icon="el-icon-search"
        v-model="searchVal"
        placeholder="搜索IP..."
      >
      </el-input>
      <el-select class="selectNodeType" v-model="selectNodeType">
        <el-option
          v-for="item in selectNodeTypeOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        >
          <i :class="item.class">&nbsp;{{ item.label }}</i>
        </el-option>
      </el-select>
      <el-select
        class="selectLevel"
        v-model="selectLevel"
        clearable
        placeholder="告警级别"
      >
        <el-option
          v-for="item in level"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!-- <el-button type="info" plain @click="sureDialogOpen">确定告警</el-button> -->

      <!-- <el-date-picker
      v-model="SelectDateValue"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker> -->

    </div>
    <div class="tableTool">
      <el-tooltip content="筛选列" placement="top" effect="dark">
        <el-popover placement="left-start" width="100" trigger="click">
          <el-checkbox-group
            id="myCheckboxGroup"
            v-model="checkedArr"
            @change="handleChange"
          >
            <el-checkbox
              v-for="item in tableColumns"
              :class="checkboxStyleFn(item)"
              :label="item.label"
              :key="item.prop"
              style="display: block"
            >
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
          <el-button class="btnLie" icon="el-icon-jk-lie" slot="reference">
          </el-button>
        </el-popover>
      </el-tooltip>
      <el-tooltip content="导出" placement="top" effect="dark">
        <download-excel
          class="downExcel"
          type="xls"
          :data="tableData"
          :fields="tableDataFields"
          name="告警面板.xls"
        >
          <el-button class="btnExport" icon="el-icon-jk-export"> </el-button>
        </download-excel>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import bus from "common/bus.js";
import { getUserData } from "@/utils/IndexedDB.js";
export default {
  props: ["tableColumns", "tableData", "tableDataFields"],
  data() {
    return {
      level: [
        { value: 3, label: "紧急" },
        { value: 2, label: "普通" },
        { value: 1, label: "提醒" },
      ],
      searchVal: "",
      changeLie: "",
      checkedArr: [],
      selectLevel: this.$route.params.level ? this.$route.params.level : "",
      handLevel: "",
      selectNodeTypeOption: [
        { value: "alertlist", label: "全部", class: "el-icon-menu" },
        {
          value: "dbalertlist",
          label: "数据库",
          class: "el-icon-jk-shujuku",
          disabled: true,
        },
        {
          value: "osalertlist",
          label: "服务器",
          class: "el-icon-jk-fuwuqi",
          disabled: true,
        },
        {
          value: "netalertlist",
          label: "网络",
          class: "el-icon-jk-wangluoshebei",
          disabled: true,
        },
      ],
      selectNodeType: this.$route.params.nodeType
        ? this.$route.params.nodeType
        : "alertlist",
      // SelectDateValue: [new Date(2008, 7, 8, 20, 0), new Date()],
      // pickerOptions:{
			// 		disabledDate:(time)=>{
			// 			return time.getTime() > Date.now()
			// 	}
			// }
    };
  },
  created() {
    // 接收告警点击
    bus.$on("handCommand", (msg) => {
      this.selectNodeType = msg.nodeType;
      this.selectLevel = msg.level;
    });
    bus.$on("handCommandAndIP", (msg) => {
      this.selectNodeType = msg.nodeType;
      this.selectLevel = msg.level;
      this.searchVal = msg.IP
      console.log(msg)
    });
    this.initCheckedArr();
    this.initSelectNodeTypeOption();
  },
  computed: {},
  methods: {
    handleChange(val) {
      this.changeLie = val;
      this.$emit("changeLie", val);
    },
    initCheckedArr() {
      this.tableColumns.forEach((element, index) => {
        if (element.isShow) {
          this.checkedArr.push(element.label);
        }
      });
    },
    initSelectNodeTypeOption() {
      getUserData("userBase", "infoBase", 0).then((res) => {
        switch (res.ms_type) {
          //数据库
          case "superAdmin":
          case "bigadmin":
          case "bigUser":
            this.selectNodeTypeOption[1].disabled = false;
            this.selectNodeTypeOption[2].disabled = false;
            this.selectNodeTypeOption[3].disabled = false;
            break;
          case "Badmin":
          case "Buser":
            this.selectNodeTypeOption[1].disabled = false;
            break;
          case "BSadmin":
          case "BSuser":
            this.selectNodeTypeOption[1].disabled = false;
            this.selectNodeTypeOption[2].disabled = false;
            break;
          case "BNadmin":
          case "BNuser":
            this.selectNodeTypeOption[1].disabled = false;
            this.selectNodeTypeOption[3].disabled = false;
            break;

          case "Sadmin":
          case "Suser":
            this.selectNodeTypeOption[2].disabled = false;
            break;
          case "SNadmin":
          case "SNuser":
            this.selectNodeTypeOption[2].disabled = false;
            this.selectNodeTypeOption[3].disabled = false;
            break;

          case "Nadmin":
          case "Nuser":
            this.selectNodeTypeOption[3].disabled = false;
            break;
        }
      });
    },
    checkboxStyleFn(item) {
      if (item.isShow) {
        return "testClass1";
      } else {
        return "testClass2";
      }
    },
    sureDialogOpen() {
      this.$emit("sureDialogOpen")
    } 
  },
  watch: {
    searchVal: function (newVal, oldVal) {
      this.$emit("getSearchIP", this.searchVal);
    },
    selectLevel: function (newVal, oldVal) {
      this.$emit("selectLevel", this.selectLevel);
    },
    selectNodeType: function (newVal, oldVal) {
      this.$emit("selectNodeType", this.selectNodeType);
    },
    
    // SelectDateValue: function (newVal, oldVal) {
    //   this.$emit("SelectDateValue", this.SelectDateValue);
    // },
    
    
  },
};
</script>

<style scoped>
.toolBar {
  overflow: hidden;
  margin-bottom: 14px;
}
.toolBar .searchBox {
  float: left;
}
.toolBar .searchBox .searchInput {
  display: inline-block;
  width: 240px;
  margin-right: 10px;
}
.toolBar .searchBox .selectLevel,
.selectNodeType {
  display: inline-block;
  width: 150px;
  margin-right: 10px;
}
.toolBar .tableTool {
  float: right;
}
.toolBar .tableTool .btnLie {
  margin-right: 10px;
}
.toolBar .tableTool .downExcel {
  display: inline-block;
}
#myCheckboxGroup /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #606266;
}
#myCheckboxGroup /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #5fb878;
  border-color: #5fb878;
}
#myCheckboxGroup /deep/ .el-checkbox {
  margin-bottom: 8px;
}
</style>